<template>
	<view class="">
		<view v-if="show" class="vh-100 vw-100 flex flex-center flex-column">
			<view class="flex flex-y-center flex-column mb-6">
				<uni-icons type="locked" size="55" color="#bed7ff"></uni-icons>
				<view class='h9' style="color: #d3e1ff;">增加次数,兑换次数</view>
			</view>
			<view v-if="WEBCONFIG.is_pay=='3'" class="btn-1 flex flex-center" @click="qrcodeShow=true"> 联系客服 </view>
			<view class="btn-1 flex flex-center" v-else>
				<button class="btn-normal" :show-message-card='true' :send-message-path="`/pages/index/index`"
					:send-message-title='`在线充值`' open-type="contact">
					联系客服
				</button>
			</view>
		</view>
		<view v-else class="p-4">
			<view class="bg-blue vh-10  rounded-3 flex flex-row flex-x-space-between flex-y-center p-4 mb-4">
				<view class="text-white h8" v-if='USERINFO.is_vip=="1"'>剩余次数:{{USERINFO.points}}次</view>
				<view class="text-white h8" v-else>VIP期间不限次数</view>
				<view>
					<button size='mini' class='text-blue' @click="$page.switch('/pages/search/index')">立即使用</button>
				</view>
			</view>

			<view class="bg-white p-6 box-shadow rounded-2">
				<view class="flex flex-row flex-wrap flex-x-space-between">
					<view :class='item.id==id?"b-2":"b-1"' class="pack-box b-1 rounded-3  py-4 w-30 mb-4"
						v-for="(item,index) in packageList" :key='index' @click="id=item.id">
						<view v-if='item.type==1' class="subscript rounded-2 text-white">{{item.points}}次</view>
						<view v-else class="subscript rounded-2 text-white">{{item.points}}天</view>
						<view class="price">￥{{item.price}}</view>
						<!-- 	<view class="point">{{item.type=='1'?" 可搜"+item.points+"题":'会员未过期无限搜'}}</view>-->
						<view class="point">{{item.title}}</view>
						<view class="tip mb-2">{{item.type=='1'?'不限时间':'不限次数'}}</view>
					</view>
				</view>
				<view class="bg-blue btn p-3 text-white" @click="createOrder">立即支付</view>
			</view>
		</view>

		<view class="box flex  flex-center" v-if='qrcodeShow'>
			<view class="position-absolute w-65 box-qrcode " style="z-index: 700;">
				<view class="position-relative  top-10 flex flex-y-flex-end vw-10" style="left:86%;"
					@click="qrcodeShow=false">
					<uni-icons type='closeempty' size="20" color="#333"></uni-icons>
				</view>
				<view class="bg-white p-5 flex flex-column rounded-6 pt-5">
					<image show-menu-by-longpress :src="WEBCONFIG.customer_qrcode" mode="widthFix" class="w-100 pt-5"></image>
					<view class="text-center h8 text-dark-light-1 pb-5">长按二维码添加客服咨询</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { $http, $page } from '@/utils'
	import { useUserStore, useRefs, useWebConfigStore } from "@/stores";
	const userStore = useUserStore()
	const { USERINFO } = useRefs(userStore);

	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const platfom = uni.getSystemInfoSync().platform
	const id = ref(0)
	const packageList = ref()
	const qrcodeShow = ref(false)
	const show = ref(false)
	onLoad(() => {
		// #ifdef MP-WEIXIN
		if (platfom == 'ios' && WEBCONFIG.value.is_pay != '1') {
			show.value = true
		}
		// #endif
		getPack()
	})
	//获取套餐列表
	const getPack = (() => {
		$http.get('Package/getList').then(res => {
			packageList.value = res.data
			id.value = res.data[0]['id']
		})
	})
	//创建支付订单
	const createOrder = (() => {
		uni.showLoading({
			title: '支付中...'
		})
		// #ifdef MP-WEIXIN 
		$http.post('Order/createOrder', { data: { id: id.value, type: '1' } }).then(res => {
			let data = res.data
			wx.requestPayment({
				"appId": data.appId,
				"timeStamp": data.timeStamp,
				"nonceStr": data.nonceStr,
				"package": data.package,
				"signType": "MD5",
				"paySign": data.paySign,
				success(res : any) {
					uni.showToast({
						title: '支付成功'
					})
					uni.hideLoading()
					uni.navigateBack()
				},
				fail(error) {

					console.log(error)
					uni.showModal({
						title: '温馨提示',
						content: '用户取消支付'
					})
				}
			})
		})
		// #endif



		// #ifdef H5	
		$http.post('Order/createOrder', { data: { id: id.value, type: '2' } }).then(res => {
			let data = res.data
			WeixinJSBridge.invoke('getBrandWCPayRequest', {
				"appId": data.appId,
				"timeStamp": data.timeStamp,
				"nonceStr": data.nonceStr,
				"package": data.package,
				"signType": "MD5",
				"paySign": data.paySign
			}, function (result : any) {
				if (result.err_msg == "get_brand_wcpay_request:ok") {
					uni.showToast({
						title: '支付成功'
					})
					uni.hideLoading()
					uni.navigateBack()
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				}
			})
		})
		// #endif


		// #ifdef MP-TOUTIAO
		$http.post('Order/createOrder', { data: { id: id.value, type: '3' } }).then(res => {
			let data = res.data
			tt.pay({
				orderInfo: data,
				service: 5,
				success(payRes : any) {
					uni.showToast({
						title: '支付成功'
					})
					uni.hideLoading()
					uni.navigateBack()
				},
				fail(payErr : any) {
					uni.showModal({
						title: '温馨提示',
						content: '支付失败'
					})
				}
			})
		})
		// #endif

	})
</script>

<style lang="scss">
	.bg-blue {
		background-color: #306ff9;
	}

	.text-blue {
		color: #306ff9;
	}

	.btn {
		text-align: center;
		border-radius: 36rpx;
	}

	.b-1 {
		border: 2rpx solid #ececec;
	}

	.b-2 {
		border: 2rpx solid #306ff9;
	}

	.pack-box {
		text-align: center;
		position: static;

		.subscript {
			position: relative;
			top: -15px;
			left: 50px;
			font-size: 22rpx;
			max-width: 90rpx;
			background-color: #306ff9;
		}

		.price {
			color: red;
			font-weight: 600;
		}

		.point {
			color: #306ff9;
			font-size: 24rpx;
		}

		.tip {
			color: #909090;
			font-size: 24rpx;
		}
	}

	.btn-1 {
		height: 70rpx;
		background-color: #306ff9;
		border-radius: 50rpx;
		width: 30%;
		color: #fff;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		/* 半透明黑色 */
		z-index: 666;

		.box-qrcode {
			left: 17.5%;
			top: 25%;
		}
	}
</style>